<template>
    <el-button icon="Refresh" size="small" circle @click="settingStore.updateRefresh" />
    <el-button icon="FullScreen" size="small" circle @click="fullScreen" />

    <el-popover placement="bottom" title="主题设置" :width="150" trigger="hover">
        <template #reference>
            <el-button icon="Setting" size="small" circle />
        </template>
        <template #default>
            <el-form>
                <el-form-item label="主题颜色">
                    <el-color-picker v-model="color" show-alpha :predefine="predefineColors" style="margin-left: 10px;"
                        size="small" :teleported="false" @change="settingStore.updateTheme(color)" />
                </el-form-item>
                <el-form-item label="暗黑模式">
                    <el-switch v-model="switchMode" inline-prompt class="custom-switch" @change="toggleDarkSwitch">
                        <template #active-action>
                            <i-ep-Moon color="White" style="background-color: black; border-radius: 50%;" />
                        </template>
                        <template #inactive-action>
                            <i-ep-Sunny color="#606266" />
                        </template>
                    </el-switch>
                </el-form-item>
            </el-form>
        </template>
    </el-popover>


    <!-- <SvgIcon name="home" color="#1b70fa" style="margin: 10px;" width="24px" height="24px" /> -->
    <div class="block">
        <el-avatar :src="userStore.userInfo?.avatar" @error="!userStore.userInfo" :size="30" :icon="UserFilled" />
    </div>
    <el-dropdown>
        <span class="el-dropdown-link">
            {{ userStore.userInfo ? userStore.userInfo.name : '未知用户' }}
            <el-icon class="el-icon--right">
                <IEpArrowDown />
            </el-icon>
        </span>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<script setup lang='ts' name='TabbarSetting'>
import useSettingStore from '@/store/modules/setting';
import useUserStore from '@/store/modules/user';
import { useRouter } from 'vue-router';
import { UserFilled } from '@element-plus/icons-vue'
import { useDark, useToggle } from '@vueuse/core'


const isDark = useDark();
const toggleDark = useToggle(isDark);
const toggleDarkSwitch = () => {
    toggleDark();
}

const settingStore = useSettingStore();
const userStore = useUserStore();
let router = useRouter();
let switchMode = ref<boolean>(isDark.value)

function fullScreen() {

    // DOM属性判断是不是全屏 全屏:true 非全屏:false
    let full = document.fullscreenElement;

    if (full) {
        // 退出全屏
        document.exitFullscreen();
    } else {
        // 进入全屏
        document.documentElement.requestFullscreen();
    }
}

function logout() {
    // 退出登录
    userStore.logout();
    // 跳转到登录页面
    router.push({ path: '/login', query: { redirect: router.currentRoute.value.fullPath } });
}

const color = ref(settingStore.getTheme());
const predefineColors = ref([
    '#409EFF',
    '#ff4500',
    '#ff8c00',
    '#ffd700',
    '#90ee90',
    '#00ced1',
    '#1e90ff',
    '#c71585',
    'rgba(255, 69, 0, 0.68)',
    'rgb(255, 120, 0)',
    'hsv(51, 100, 98)',
    'hsva(120, 40, 94, 0.5)',
    'hsl(181, 100%, 37%)',
    'hsla(209, 100%, 56%, 0.73)',
    '#c7158577',
])

</script>

<style scoped lang='scss'>
.el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}

.block {
    flex: 1;
    margin: 0px 12px;
}

.custom-switch {
    --el-switch-on-color: #2c2c2c;
    margin-left: 10px;
}
</style>